<template>
  <div style="text-align: left;">
    <h3>费用报表</h3>
    <div class="card">
      <router-link
        v-for="card in cards"
        :key="card.id"
        :to="{ name: card.routeName }"
        class="card-item"
        @mouseover="handleMouseOver(card)"
        @mouseleave="handleMouseLeave(card)"
        :style="{ transform: card.hovered ? 'scale(1.1)' : 'scale(1)' }"
        style="overflow: hidden;"
      >
        <div class="card-h4">{{ card.title }}</div>
        <div class="card-p">{{ card.description }}</div>
        <div class="card-image">
          <img src="../img/报表.png" class="card-img" />
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      cards: [
        { id: 1, title: '费用统计', description: '以房屋/车位为对象，统计所有计费项目的费用总额', routeName: 'ExpenseReports', hovered: false },
        
        { id: 3, title: '按月出账', description: '统计每月出账总额及支付情况', routeName: 'MonthlyBasis', hovered: false },
		{ id: 4, title: '工单报表', description: '房屋各维度的数据统计与分析', routeName: 'HouseBao', hovered: false },
		
      ]
    });

    const handleMouseOver = (card) => {
      card.hovered = true;
    };

    const handleMouseLeave = (card) => {
      card.hovered = false;
    };

    return {
      cards: state.cards,
      handleMouseOver,
      handleMouseLeave
    };
  }
};
</script>

<style scoped>
/* 组件样式 */
.card {
  border: 1px solid #ccc;
  padding: 20px;
  margin-top: 10px;
  overflow: hidden;
}

.card-item {
  margin-bottom: 10px;
  border-radius: 10px;
  background-color: #fff;
  height: 110px;
  width: 27.8%;
  padding: 15px 15px 28px 30px;
  float: left;
  margin-right: 30px;
  transition: transform 0.3s ease-in-out; /* 调整过渡时间和缓动函数 */
  cursor: pointer; /* 设置鼠标指针为手指状 */
  text-align: left;
}

.card-item:hover {
  transform: scale(1.1);
}

.card-h4 {
  font-weight: 700;
  font-size: 24px;
  color: #2b3451;
  width: 100px;
}

.card-p {
  width: 200px;
  height: 41px;
  margin-top: 15px;
  color: #7e8081;
  font-size: 14px;
}

.card-image {
  width: 80px;
  float: right;
  margin-top: -70px;
}

.card-img {
  width: 80px;
  height: 80px;
  opacity: 0.25;
  transition: opacity 0.3s ease; /* 添加透明度过渡效果 */
}

.card-item:hover .card-img {
  opacity: 1; /* 悬停时恢复图片原始透明度 */
}
</style>
